<template>
  <div>
      <h1>子路由 页面1  关于的新闻</h1>
      <input type="text" v-model="msg">
      <input type="checkbox"  >吃
      <input type="checkbox"  >玩
      <input type="checkbox"  >乐
  </div>
</template>

<script >
export default {
  name:"abone",
  data(){
    return {
      msg:""
    }
  },
  // 首次进入vue组件 会触发beforeCreate，created，beforeMount，mounted 四个生命周期

  // keepAlive组件 会产生俩个新的生命周期 activated 组件激活deactivated 组件的失活
  // 由keepalive缓存的组件，首次进入正常触发 beforeCreate，created，beforeMount，mounted 和activated 组件激活，在次离开和进入组件 只触发 activated 组件激活deactivated 组件的失活
  beforeCreate() {
      console.log("创建前")
  },
  created() {
    console.log("创建后")
  },
  beforeMount() {
    console.log("挂载前")
  },
  mounted() {
    console.log("挂载后")
  },
  beforeDestroy() {
      console.log("组件的销毁前")
  },
  destroyed() {
      console.log("组件的销毁后")
  },
  // keepAlive 会产生俩个新的生命周期
  activated() { //组件激活 
      console.log("组件激活")
  },
  deactivated() {//组件的失活
    console.log("组件失活")
  },
}
</script>
